<template>
  <div class="marketing-home">
    <!-- 顶部欢迎区域 -->
    <div class="welcome-header">
      <div class="bg-gradient-to-r from-green-500 to-blue-600 px-4 py-6 text-white">
        <div class="flex items-center justify-between mb-4">
          <div>
            <h1 class="text-xl font-bold">市场部工作台</h1>
            <p class="text-sm text-white/80 mt-1">{{ formatToday() }}</p>
          </div>
          <div class="text-right">
            <div class="text-2xl font-bold">{{ pendingCases }}</div>
            <div class="text-xs text-white/80">待录入案件</div>
          </div>
        </div>
      </div>
    </div>

    <div class="page-content px-4 py-6">
      <!-- 数据统计 -->
      <div class="grid grid-cols-2 gap-4 mb-6">
        <div class="bg-white rounded-xl p-4 shadow-sm">
          <div class="flex items-center">
            <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
              <i class="fas fa-plus-circle text-green-600 text-lg"></i>
            </div>
            <div>
              <p class="text-xs text-gray-500">本月录入</p>
              <p class="text-2xl font-bold text-green-600">{{ stats.monthlyInputs }}</p>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-xl p-4 shadow-sm">
          <div class="flex items-center">
            <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center mr-3">
              <i class="fas fa-clock text-orange-600 text-lg"></i>
            </div>
            <div>
              <p class="text-xs text-gray-500">待审核</p>
              <p class="text-2xl font-bold text-orange-600">{{ stats.pendingReviews }}</p>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-xl p-4 shadow-sm">
          <div class="flex items-center">
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
              <i class="fas fa-check-circle text-blue-600 text-lg"></i>
            </div>
            <div>
              <p class="text-xs text-gray-500">已通过</p>
              <p class="text-2xl font-bold text-blue-600">{{ stats.approved }}</p>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-xl p-4 shadow-sm cursor-pointer hover:shadow-md transition-shadow" @click="showTargetClientsModal">
          <div class="flex items-center">
            <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
              <i class="fas fa-users text-purple-600 text-lg"></i>
            </div>
            <div>
              <p class="text-xs text-gray-500">目标客户</p>
              <p class="text-2xl font-bold text-purple-600">{{ stats.targetClients }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 快速操作 -->
      <div class="mb-6">
        <h2 class="text-lg font-bold text-gray-800 mb-4">快速操作</h2>
        <div class="grid grid-cols-2 gap-3">
          <router-link to="/marketing/case/create" class="bg-white p-4 rounded-xl shadow-sm text-center">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-2">
              <i class="fas fa-plus-circle text-green-600 text-lg"></i>
            </div>
            <h3 class="text-sm font-medium text-gray-800">新增案件</h3>
          </router-link>
          
          <router-link to="/marketing/cases" class="bg-white p-4 rounded-xl shadow-sm text-center">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-2">
              <i class="fas fa-folder text-blue-600 text-lg"></i>
            </div>
            <h3 class="text-sm font-medium text-gray-800">案件中心</h3>
          </router-link>
          
          <router-link to="/marketing/qa" class="bg-white p-4 rounded-xl shadow-sm text-center">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-2">
              <i class="fas fa-comments text-purple-600 text-lg"></i>
            </div>
            <h3 class="text-sm font-medium text-gray-800">智能问答</h3>
          </router-link>
          
          <div class="bg-white p-4 rounded-xl shadow-sm text-center" @click="generateReport">
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-2">
              <i class="fas fa-chart-bar text-orange-600 text-lg"></i>
            </div>
            <h3 class="text-sm font-medium text-gray-800">生成报表</h3>
          </div>
        </div>
      </div>



      <!-- 待办事项 -->
      <div class="bg-white rounded-xl shadow-sm mb-6">
        <div class="px-4 py-3 border-b border-gray-100">
          <h2 class="text-lg font-bold text-gray-800">待办事项</h2>
        </div>
        <div class="p-4">
          <div class="space-y-3">
            <div v-for="task in todoList" :key="task.id" class="flex items-start p-3 bg-gray-50 rounded-lg">
              <div class="flex-shrink-0 mt-1">
                <div :class="getPriorityColor(task.priority)" class="w-3 h-3 rounded-full"></div>
              </div>
              <div class="ml-3 flex-1">
                <p class="font-medium text-gray-800 text-sm">{{ task.title }}</p>
                <p class="text-xs text-gray-600">{{ task.description }}</p>
                <p class="text-xs text-gray-500 mt-1">截止：{{ formatDate(task.deadline) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 近期案件 -->
      <div class="bg-white rounded-xl shadow-sm">
        <div class="px-4 py-3 border-b border-gray-100 cursor-pointer" @click="toggleRecentCases">
          <div class="flex items-center justify-between">
            <h2 class="text-lg font-bold text-gray-800">近期录入案件</h2>
            <i :class="['fas transition-transform', recentCasesExpanded ? 'fa-chevron-up' : 'fa-chevron-down']" class="text-gray-500"></i>
          </div>
        </div>
        <div v-show="recentCasesExpanded" class="p-4">
          <div class="space-y-3">
            <div v-for="case_ in recentCases" :key="case_.id" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <div class="flex-1">
                <p class="font-medium text-gray-800 text-sm">{{ case_.title }}</p>
                <p class="text-xs text-gray-600">{{ case_.client }}</p>
                <p class="text-xs text-gray-500">{{ formatDate(case_.createdAt) }}</p>
              </div>
              <div>
                <span :class="getStatusClass(case_.status)" class="text-xs px-2 py-1 rounded">
                  {{ getStatusText(case_.status) }}
                </span>
              </div>
            </div>
          </div>
          <router-link to="/marketing/cases" class="block w-full mt-4 text-center text-blue-600 hover:text-blue-700 text-sm font-medium py-2">
            查看所有案件
          </router-link>
        </div>
      </div>
    </div>

    <!-- 企业展示对话框 -->
    <el-dialog 
      v-model="enterpriseDisplayVisible" 
      title="企业展示" 
      width="90%" 
      class="enterprise-dialog"
    >
      <div class="enterprise-display">
        <!-- 企业概况 -->
        <div class="enterprise-overview mb-6">
          <div class="flex items-center mb-4">
            <div class="w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mr-4">
              <i class="fas fa-building text-blue-600 text-2xl"></i>
            </div>
            <div>
              <h2 class="text-xl font-bold text-gray-800">律智法律事务所</h2>
              <p class="text-gray-600">专业、高效、值得信赖的法律服务机构</p>
            </div>
          </div>
          
          <!-- 好评率和评价 -->
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-gradient-to-r from-green-50 to-green-100 p-4 rounded-lg text-center">
              <div class="text-2xl font-bold text-green-600 mb-1">98.5%</div>
              <div class="text-sm text-green-700">客户好评率</div>
            </div>
            <div class="bg-gradient-to-r from-blue-50 to-blue-100 p-4 rounded-lg text-center">
              <div class="text-2xl font-bold text-blue-600 mb-1">4.9</div>
              <div class="text-sm text-blue-700">平均评分</div>
            </div>
            <div class="bg-gradient-to-r from-purple-50 to-purple-100 p-4 rounded-lg text-center">
              <div class="text-2xl font-bold text-purple-600 mb-1">1,235</div>
              <div class="text-sm text-purple-700">服务案件</div>
            </div>
            <div class="bg-gradient-to-r from-orange-50 to-orange-100 p-4 rounded-lg text-center">
              <div class="text-2xl font-bold text-orange-600 mb-1">15年</div>
              <div class="text-sm text-orange-700">执业经验</div>
            </div>
          </div>
        </div>

        <!-- 业绩展示 -->
        <div class="enterprise-achievements mb-6">
          <h3 class="text-lg font-bold text-gray-800 mb-4">
            <i class="fas fa-trophy text-yellow-500 mr-2"></i>业绩展示
          </h3>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 成功案例 -->
            <div class="bg-white border border-gray-200 rounded-lg p-4">
              <h4 class="font-semibold text-gray-800 mb-3 flex items-center">
                <i class="fas fa-gavel text-blue-600 mr-2"></i>成功案例
              </h4>
              <div class="space-y-3">
                <div class="flex justify-between items-center p-3 bg-gray-50 rounded">
                  <span class="text-sm text-gray-700">重大交通事故赔偿案</span>
                  <span class="text-sm font-semibold text-green-600">胜诉</span>
                </div>
                <div class="flex justify-between items-center p-3 bg-gray-50 rounded">
                  <span class="text-sm text-gray-700">医疗事故纠纷案</span>
                  <span class="text-sm font-semibold text-green-600">和解</span>
                </div>
                <div class="flex justify-between items-center p-3 bg-gray-50 rounded">
                  <span class="text-sm text-gray-700">工伤赔偿案</span>
                  <span class="text-sm font-semibold text-green-600">胜诉</span>
                </div>
              </div>
        </div>

            <!-- 客户锦旗 -->
            <div class="bg-white border border-gray-200 rounded-lg p-4">
              <h4 class="font-semibold text-gray-800 mb-3 flex items-center">
                <i class="fas fa-flag text-red-600 mr-2"></i>客户锦旗
              </h4>
          <div class="space-y-3">
                <div class="bg-gradient-to-r from-red-50 to-yellow-50 p-3 rounded border-l-4 border-red-500">
                  <div class="text-sm font-medium text-gray-800">"正义之师，维权有道"</div>
                  <div class="text-xs text-gray-600 mt-1">- 张某交通事故案</div>
                </div>
                <div class="bg-gradient-to-r from-red-50 to-yellow-50 p-3 rounded border-l-4 border-red-500">
                  <div class="text-sm font-medium text-gray-800">"专业高效，值得信赖"</div>
                  <div class="text-xs text-gray-600 mt-1">- 李某工伤赔偿案</div>
                </div>
                <div class="bg-gradient-to-r from-red-50 to-yellow-50 p-3 rounded border-l-4 border-red-500">
                  <div class="text-sm font-medium text-gray-800">"公正执法，为民维权"</div>
                  <div class="text-xs text-gray-600 mt-1">- 王某医疗纠纷案</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 优秀律师 -->
        <div class="excellent-lawyers mb-6">
          <h3 class="text-lg font-bold text-gray-800 mb-4">
            <i class="fas fa-user-tie text-blue-600 mr-2"></i>优秀律师
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-white border border-gray-200 rounded-lg p-4 text-center">
              <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                <i class="fas fa-user text-blue-600 text-xl"></i>
              </div>
              <h4 class="font-semibold text-gray-800">张律师</h4>
              <p class="text-sm text-gray-600">主任律师</p>
              <p class="text-xs text-gray-500 mt-1">15年执业经验</p>
              <div class="flex justify-center mt-2">
                <span class="text-yellow-400">★★★★★</span>
              </div>
            </div>
            <div class="bg-white border border-gray-200 rounded-lg p-4 text-center">
              <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                <i class="fas fa-user text-green-600 text-xl"></i>
              </div>
              <h4 class="font-semibold text-gray-800">李律师</h4>
              <p class="text-sm text-gray-600">高级律师</p>
              <p class="text-xs text-gray-500 mt-1">12年执业经验</p>
              <div class="flex justify-center mt-2">
                <span class="text-yellow-400">★★★★★</span>
              </div>
            </div>
            <div class="bg-white border border-gray-200 rounded-lg p-4 text-center">
              <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
                <i class="fas fa-user text-purple-600 text-xl"></i>
              </div>
              <h4 class="font-semibold text-gray-800">王律师</h4>
              <p class="text-sm text-gray-600">资深律师</p>
              <p class="text-xs text-gray-500 mt-1">10年执业经验</p>
              <div class="flex justify-center mt-2">
                <span class="text-yellow-400">★★★★☆</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 客户评价 -->
        <div class="customer-reviews">
          <h3 class="text-lg font-bold text-gray-800 mb-4">
            <i class="fas fa-comments text-green-600 mr-2"></i>客户评价
          </h3>
          <div class="space-y-4">
            <div class="bg-gray-50 p-4 rounded-lg">
              <div class="flex items-start">
                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                  <i class="fas fa-user text-blue-600"></i>
                </div>
                <div class="flex-1">
                  <div class="flex items-center mb-2">
                    <span class="font-medium text-gray-800 mr-2">张先生</span>
                    <span class="text-yellow-400">★★★★★</span>
                  </div>
                  <p class="text-sm text-gray-700">"服务非常专业，律师经验丰富，帮我们很好地解决了交通事故赔偿问题。非常感谢！"</p>
                  <p class="text-xs text-gray-500 mt-2">2024-01-15</p>
                </div>
              </div>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
              <div class="flex items-start">
                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                  <i class="fas fa-user text-green-600"></i>
                </div>
                <div class="flex-1">
                  <div class="flex items-center mb-2">
                    <span class="font-medium text-gray-800 mr-2">李女士</span>
                    <span class="text-yellow-400">★★★★★</span>
              </div>
                  <p class="text-sm text-gray-700">"工作效率很高，态度也很好，帮助我们获得了满意的赔偿结果。值得推荐！"</p>
                  <p class="text-xs text-gray-500 mt-2">2024-01-10</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

      <template #footer>
        <div class="flex justify-end">
          <el-button @click="enterpriseDisplayVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 目标客户列表对话框 -->
    <el-dialog 
      v-model="targetClientsModalVisible" 
      title="目标客户列表" 
      width="90%" 
      class="target-clients-dialog"
    >
      <div class="target-clients-content">
        <!-- 搜索栏 -->
        <div class="mb-4">
          <el-input
            v-model="clientSearchKeyword"
            placeholder="搜索客户姓名、电话或备注..."
            prefix-icon="el-icon-search"
            class="w-full"
          />
        </div>

        <!-- 筛选条件 -->
        <div class="flex flex-wrap gap-2 mb-4">
          <el-button 
            :type="clientFilter === 'all' ? 'primary' : 'default'"
            size="small"
            @click="clientFilter = 'all'"
          >
            全部 ({{ filteredTargetClients.length }})
          </el-button>
          <el-button 
            :type="clientFilter === 'potential' ? 'primary' : 'default'"
            size="small"
            @click="clientFilter = 'potential'"
          >
            潜在客户 ({{ targetClients.filter(c => c.status === 'potential').length }})
          </el-button>
          <el-button 
            :type="clientFilter === 'contacted' ? 'primary' : 'default'"
            size="small"
            @click="clientFilter = 'contacted'"
          >
            已联系 ({{ targetClients.filter(c => c.status === 'contacted').length }})
          </el-button>
          <el-button 
            :type="clientFilter === 'interested' ? 'primary' : 'default'"
            size="small"
            @click="clientFilter = 'interested'"
          >
            有意向 ({{ targetClients.filter(c => c.status === 'interested').length }})
          </el-button>
          <el-button 
            :type="clientFilter === 'signed' ? 'primary' : 'default'"
            size="small"
            @click="clientFilter = 'signed'"
          >
            已签约 ({{ targetClients.filter(c => c.status === 'signed').length }})
          </el-button>
        </div>

        <!-- 客户列表 -->
        <div class="space-y-3 max-h-96 overflow-y-auto">
          <div v-for="client in filteredTargetClients" :key="client.id" class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
            <div class="flex items-start justify-between">
              <div class="flex-1">
                <div class="flex items-center mb-2">
                  <h4 class="font-semibold text-gray-800 mr-3">{{ client.name }}</h4>
                  <span :class="getClientStatusClass(client.status)" class="text-xs px-2 py-1 rounded-full">
                    {{ getClientStatusText(client.status) }}
                  </span>
                </div>
                <div class="text-sm text-gray-600 space-y-1">
                  <p><i class="fas fa-phone text-gray-400 mr-2"></i>{{ client.phone }}</p>
                  <p v-if="client.caseType"><i class="fas fa-gavel text-gray-400 mr-2"></i>{{ client.caseType }}</p>
                  <p v-if="client.description"><i class="fas fa-comment text-gray-400 mr-2"></i>{{ client.description }}</p>
                  <p><i class="fas fa-calendar text-gray-400 mr-2"></i>{{ formatDate(client.createdAt) }}</p>
                </div>
              </div>
              <div class="flex flex-col space-y-2">
                <el-button size="small" type="primary" @click="contactClient(client)">
                  <i class="fas fa-phone mr-1"></i>联系
                </el-button>
                <el-button size="small" @click="editClient(client)">
                  <i class="fas fa-edit mr-1"></i>编辑
                </el-button>
              </div>
            </div>
          </div>
          
          <div v-if="filteredTargetClients.length === 0" class="text-center py-8 text-gray-500">
            <i class="fas fa-users text-4xl mb-4 text-gray-300"></i>
            <p>暂无符合条件的目标客户</p>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="flex justify-between">
          <el-button type="success" @click="addNewClient">
            <i class="fas fa-plus mr-1"></i>新增客户
          </el-button>
          <el-button @click="targetClientsModalVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'

export default {
  name: 'MarketingHome',
  setup() {
    // 企业展示对话框状态
    const enterpriseDisplayVisible = ref(false)
    
    // 目标客户对话框状态
    const targetClientsModalVisible = ref(false)
    const clientSearchKeyword = ref('')
    const clientFilter = ref('all')

    const stats = ref({
      monthlyInputs: 45,
      pendingReviews: 8,
      approved: 37,
      targetClients: 156
    })
    
    // 折叠状态
    const recentCasesExpanded = ref(false)
    
    const recentCases = ref([
      {
        id: 1,
        title: '机动车交通事故人身损害赔偿纠纷',
        client: '王先生',
        status: 'pending',
        createdAt: '2024-01-18'
      },
      {
        id: 2,
        title: '行人过马路被撞伤残赔偿案',
        client: '李女士',
        status: 'approved',
        createdAt: '2024-01-17'
      },
      {
        id: 3,
        title: '电动车与汽车碰撞交通事故案',
        client: '张先生',
        status: 'reviewing',
        createdAt: '2024-01-16'
      },
      {
        id: 4,
        title: '酒驾肇事逃逸刑事附带民事案',
        client: '陈女士',
        status: 'approved',
        createdAt: '2024-01-15'
      },
      {
        id: 5,
        title: '大货车侧翻压车交通事故案',
        client: '刘先生',
        status: 'reviewing',
        createdAt: '2024-01-14'
      }
    ])
    
    const todoList = ref([
      {
        id: 1,
        title: '审核交通事故材料',
        description: '审核王先生提交的机动车交通事故责任认定书和伤残鉴定报告',
        deadline: '2024-01-20',
        priority: 'high'
      },
      {
        id: 2,
        title: '跟进酒驾案件进度',
        description: '跟进陈女士酒驾肇事案的刑事部分审理进展',
        deadline: '2024-01-22',
        priority: 'high'
      },
      {
        id: 3,
        title: '联系交通事故鉴定机构',
        description: '为大货车侧翻案联系专业的车辆技术鉴定机构',
        deadline: '2024-01-23',
        priority: 'medium'
      },
      {
        id: 4,
        title: '收集监控录像',
        description: '协助客户收集事故现场周边的监控录像证据',
        deadline: '2024-01-24',
        priority: 'medium'
      },
      {
        id: 5,
        title: '交通事故客户回访',
        description: '对本周完成的交通事故案件进行客户满意度回访',
        deadline: '2024-01-25',
        priority: 'low'
      }
    ])

    // 目标客户数据
    const targetClients = ref([
      {
        id: 1,
        name: '张三',
        phone: '138****1234',
        caseType: '交通事故人身损害赔偿',
        description: '机动车与行人碰撞，伤者需要赔偿',
        status: 'potential',
        createdAt: '2024-01-18'
      },
      {
        id: 2,
        name: '李四',
        phone: '139****5678',
        caseType: '工伤赔偿纠纷',
        description: '工地意外受伤，需要工伤认定',
        status: 'contacted',
        createdAt: '2024-01-17'
      },
      {
        id: 3,
        name: '王五',
        phone: '136****9012',
        caseType: '医疗事故纠纷',
        description: '手术失误导致并发症',
        status: 'interested',
        createdAt: '2024-01-16'
      },
      {
        id: 4,
        name: '赵六',
        phone: '137****3456',
        caseType: '产品质量纠纷',
        description: '购买的产品存在质量问题',
        status: 'signed',
        createdAt: '2024-01-15'
      },
      {
        id: 5,
        name: '钱七',
        phone: '135****7890',
        caseType: '劳动争议',
        description: '公司拖欠工资和加班费',
        status: 'potential',
        createdAt: '2024-01-14'
      },
      {
        id: 6,
        name: '孙八',
        phone: '134****2345',
        caseType: '合同纠纷',
        description: '房屋买卖合同违约',
        status: 'contacted',
        createdAt: '2024-01-13'
      },
      {
        id: 7,
        name: '周九',
        phone: '133****6789',
        caseType: '侵权责任纠纷',
        description: '名誉权受到侵犯',
        status: 'interested',
        createdAt: '2024-01-12'
      },
      {
        id: 8,
        name: '吴十',
        phone: '132****0123',
        caseType: '婚姻家庭纠纷',
        description: '离婚财产分割问题',
        status: 'potential',
        createdAt: '2024-01-11'
      }
    ])
    
    const pendingCases = computed(() => {
      return recentCases.value.filter(c => c.status === 'pending').length + 5
    })

    // 过滤目标客户
    const filteredTargetClients = computed(() => {
      let filtered = targetClients.value

      // 按状态筛选
      if (clientFilter.value !== 'all') {
        filtered = filtered.filter(client => client.status === clientFilter.value)
      }

      // 按关键词搜索
      if (clientSearchKeyword.value.trim()) {
        const keyword = clientSearchKeyword.value.toLowerCase()
        filtered = filtered.filter(client => 
          client.name.toLowerCase().includes(keyword) ||
          client.phone.includes(keyword) ||
          client.caseType.toLowerCase().includes(keyword) ||
          (client.description && client.description.toLowerCase().includes(keyword))
        )
      }

      return filtered
    })
    
    const formatToday = () => {
      return dayjs().format('YYYY年MM月DD日 dddd')
    }
    
    const formatDate = (date) => {
      return dayjs(date).format('MM-DD')
    }
    
    const getStatusClass = (status) => {
      const classes = {
        pending: 'bg-yellow-100 text-yellow-800',
        approved: 'bg-green-100 text-green-800',
        reviewing: 'bg-blue-100 text-blue-800',
        rejected: 'bg-red-100 text-red-800'
      }
      return classes[status] || 'bg-gray-100 text-gray-800'
    }
    
    const getStatusText = (status) => {
      const texts = {
        pending: '待审核',
        approved: '已通过',
        reviewing: '审核中',
        rejected: '已拒绝'
      }
      return texts[status] || '未知'
    }
    
    const getPriorityColor = (priority) => {
      const colors = {
        high: 'bg-red-500',
        medium: 'bg-yellow-500',
        low: 'bg-green-500'
      }
      return colors[priority] || 'bg-gray-500'
    }
    
    const generateReport = () => {
      alert('生成报表功能开发中...')
    }

    const showEnterpriseDisplay = () => {
      enterpriseDisplayVisible.value = true
    }

    const toggleRecentCases = () => {
      recentCasesExpanded.value = !recentCasesExpanded.value
    }

    // 目标客户相关方法
    const showTargetClientsModal = () => {
      targetClientsModalVisible.value = true
    }

    const getClientStatusClass = (status) => {
      const classes = {
        potential: 'bg-gray-100 text-gray-800',
        contacted: 'bg-blue-100 text-blue-800',
        interested: 'bg-yellow-100 text-yellow-800',
        signed: 'bg-green-100 text-green-800'
      }
      return classes[status] || 'bg-gray-100 text-gray-800'
    }

    const getClientStatusText = (status) => {
      const texts = {
        potential: '潜在客户',
        contacted: '已联系',
        interested: '有意向',
        signed: '已签约'
      }
      return texts[status] || '未知'
    }

    const contactClient = (client) => {
      alert(`正在联系客户：${client.name} (${client.phone})`)
    }

    const editClient = (client) => {
      alert(`编辑客户：${client.name}`)
    }

    const addNewClient = () => {
      alert('新增客户功能开发中...')
    }
    
    return {
      stats,
      recentCases,
      todoList,
      pendingCases,
      enterpriseDisplayVisible,
      recentCasesExpanded,
      targetClientsModalVisible,
      targetClients,
      clientSearchKeyword,
      clientFilter,
      filteredTargetClients,
      formatToday,
      formatDate,
      getStatusClass,
      getStatusText,
      getPriorityColor,
      generateReport,
      showEnterpriseDisplay,
      toggleRecentCases,
      showTargetClientsModal,
      getClientStatusClass,
      getClientStatusText,
      contactClient,
      editClient,
      addNewClient
    }
  }
}
</script>

<style scoped>
.marketing-home {
  background-color: #f8fafc;
  min-height: 100vh;
}

.welcome-header {
  margin-bottom: 0;
}

.page-content {
  background-color: #f8fafc;
}
</style> 